<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../../css/mui.min.css">
		<!--App自定义的css-->
		<!--<link rel="stylesheet" type="text/css" href="../css/app.css" />-->
		<style>
			.mui-card .mui-control-content {
				padding: 10px;
			}
			
			.mui-control-content {
				height: 150px;
			}
			.mname {
				width: 15%;
				text-align: center;
			}
			
			.mdata {
				width:40%;
			}
			
			input {
				width: 95%;
				margin-left: 2%;
			}
		</style>
	</head>

	<body style="background: white;">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">灾害统计</h1>
		</header>
		<div style="margin-top: 50%;margin-left: 25%;">
			
			<h1>正在建设中</h1>
		</div>
		<!--<div class="mui-content" style="background: white;">
			<div style="padding: 10px 10px;">
				<div id="segmentedControl" class="mui-segmented-control" style="width: 50%;margin-left: 25%;">
					<a class="mui-control-item mui-active" href="#item1">按时间</a>
					<a class="mui-control-item" href="#item2">按种类</a>
				</div>
			</div>
			<div>
				<div id="item1" class="mui-control-content mui-active">
					<table style="width: 100%;margin-top: 1%;position: absolute;width: 100%;height: 20%;">
						<tr>
							<td class="mname">起止：</td>
							<td class="mdata"><input placeholder="mm/dd/yyy" /> </td>
							<td class="mdata" style="width:40%;"><input placeholder="mm/dd/yyy" /></td>
						</tr>
						<tr>
							<td class="mname">类别：</td>
							<td class="mdata"><input placeholder="mm/dd/yyy" /> </td>
							<td >
								<button type="button" class="mui-btn mui-btn-outlined mbtn" style="width: 95%;margin-left: 2%;">查询</button>
							</td>
						</tr>
					</table>
					<div class="centerDiv"  id="histogram" style="position: absolute;width: 100%;height: 500px;top:45%;">
					</div>
				</div>
				<div id="item2" class="mui-control-content">
					<table style="width: 100%;margin-top: 1%;position: absolute;width: 100%;height: 20%;">
						<tr>
							<td class="mname">起止：</td>
							<td class="mdata"><input placeholder="mm/dd/yyy" /> </td>
							<td class="mdata" style="width:40%;"><input placeholder="mm/dd/yyy" /></td>
							<td >
								<button type="button" class="mui-btn mui-btn-outlined mbtn" style="width: 95%;margin-left: 2%;">查询</button>
							</td>
						</tr>
					</table>
					<div class="centerDiv"  id="gra" style="position: absolute;width:370px;height: 500px;top:45%;background: darkorange;">
					</div>
				</div>
			</div>
		</div>-->
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/echarts.min.js"></script>
		<!--<script>
			mui.plusReady(function(){
			
			var myChart = echarts.init(document.getElementById('histogram'));
	        var option = {
	          title: {
	              text: '灾害数据统计',
	              x: 'center'
	          },
	            tooltip: {},
	            xAxis: {
	                data: ["2018.01","2018.02","2018.03","2018.04","2018.05","2018.06"]
	            },
	            yAxis: {},
	            series: [{
//	                name: '销量',
	                type: 'bar',
	                data: [5, 20, 36, 10, 10, 20]
	            }]
	        };
	        myChart.setOption(option);
			
			var myChart = echarts.init(document.getElementById('gra'));
	        var option = {
	          title: {
	              text: '灾害数据统计',
	              x: 'center'
	          },
	            tooltip: {},
	            xAxis: {
	                data: ["2018.01","2018.02","2018.03","2018.04","2018.05","2018.06"]
	            },
	            yAxis: {},
	            series: [{
//	                name: '销量',
	                type: 'bar',
	                data: [5, 20, 36, 10, 10, 20]
	            }]
	        };
	        myChart.setOption(option);
			
			
			});
			
			
			
			(function($) {
				$('#scroll').scroll({
					indicators: true //是否显示滚动条
				});
				var segmentedControl = document.getElementById('segmentedControl');
				$('.mui-input-group').on('change', 'input', function() {
					if (this.checked) {
						var styleEl = document.querySelector('input[name="style"]:checked');
						var colorEl = document.querySelector('input[name="color"]:checked');
						if (styleEl && colorEl) {
							var style = styleEl.value;
							var color = colorEl.value;
							segmentedControl.className = 'mui-segmented-control' + (style ? (' mui-segmented-control-' + style) : '') + ' mui-segmented-control-' + color;
						}
					}
				});
			})(mui);
		</script>-->

	</body>

</html>